<template>
<h1>El-开关组件</h1>
  <el-switch v-model="isOpen"></el-switch>
  <el-switch
      v-model="value1"
      style="--el-switch-on-color:#13ce66;--el-switch-off-color:orange"
  ></el-switch>
  <hr>
<!--  开关只支持布尔类型的值
如果想要扩展成数字或字符串类型，需要设置active-value和inactive-value属性来控制-->
<!--  加了属性绑定，值就必须写成：1表示数字类型 '1'表示字符串类型-->
  <el-switch v-model="value2" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="value3" :active-value="'1'" :inactive-value="'0'"></el-switch>
<!--  不加属性绑定的话，""里的值默认是string类型-->
  <el-switch v-model="value3" active-value="1" inactive-value="1"></el-switch> <br>
<!--  写一个开关，支持的数据类型是number类型，开关是打开的-->
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
<!--  给按钮添加一个切换状态时触发的事件 @change 输出开关的值和值的类型 1 'number'-->
  <el-switch
      v-model="num"
      :active-value="1"
      :inactive-value="0"
      @change="f"
  ></el-switch>
</template>

<script setup>
import {ref} from "vue";

//定义变量用来控制开关的状态
const isOpen=ref(true);
const value1=ref(false);
const value2=ref(0);
const value3=ref('1');
const num=ref(1);
//定义开关状态切换事件触发的方法
const f=()=>{
  console.log('开关状态被改变了！')
  console.log(num.value,typeof num.value)
}
</script>

<style scoped>

</style>